<template>
  <div class="bottom-view">
    <div class="view">
      <el-card shadow="hover">
        <template #header>
          <div class="title-wrapper">关键词搜索</div>
        </template>
        <template #default>
          <div class="chart-wrapper">
            <div class="chart-inner">
              <div class="chart">
                <div class="chart-title">搜索用户数</div>
                <div class="chart-data">93,634</div>
                <div id="searchUserChart"></div>
              </div>
              <div class="chart">
                <div class="chart-title">搜索量</div>
                <div class="chart-data">198,756</div>
                <div id="searchNumChart"></div>
              </div>
            </div>
            <div class="table-wrapper">
              <el-table :data="tableData">
                <el-table-column width="180" label="排名" prop="rank"></el-table-column>
                <el-table-column label="关键字" prop="keyword"></el-table-column>
                <el-table-column label="总搜索数" prop="count"></el-table-column>
                <el-table-column label="用户搜索数" prop="users"></el-table-column>
                <el-table-column label="搜索率" prop="range"></el-table-column>
              </el-table>
              <el-pagination
                layout="prev,pager,next"
                :total="100"
                :page-size="4"
                background
                @current-change="onPageChange"
              ></el-pagination>
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="view">
      <el-card shadow="hover">
        <template #header>
          <div class="title-wrapper">
            <div class="title">分类销售排行</div>
            <div class="radio-wrapper">
              <el-radio-group size="small" v-model="radioSelect">
                <el-radio-button label="品类"></el-radio-button>
                <el-radio-button label="商品"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <template #default>
          <div class="chart-wrapper">
            <div id="categoryChart"></div>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      tableData: [
        { id: 1, rank: 1, keyword: '北京', count: 100, users: 90, range: '90%' },
        { id: 2, rank: 2, keyword: '上海', count: 100, users: 90, range: '90%' },
        { id: 3, rank: 3, keyword: '广州', count: 100, users: 90, range: '90%' },
        { id: 4, rank: 4, keyword: '深圳', count: 100, users: 90, range: '90%' },
        { id: 5, rank: 5, keyword: '杭州', count: 100, users: 90, range: '90%' }
      ],
      radioSelect: '品类'
    }
  },
  mounted() {
    this.chartInit()
  },
  methods: {
    chartInit() {
      this.chartInitUser()
      this.chartInitNum()
      this.chartInitCategory()
    },
    // 搜索用户数
    chartInitUser() {
      const chartDom = document.getElementById('searchUserChart')
      const chart = this.$echarts.init(chartDom)
      chart.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          show: false
        },
        grid: {
          top: '2%',
          left: 0,
          bottom: 0,
          right: 0
        },
        series: [{
          type: 'line',
          areaStyle: {
            color: 'rgba(95,187,255,.5)'
          },
          lineStyle: {
            color: 'rgb(95,187,255)'
          },
          itemStyle: {
            opacity: false
          },
          // 平滑展示
          smooth: true,
          data: [100, 200, 300, 400, 100, 300, 220]
        }]
      })
      window.addEventListener('resize', () => {
        chart.resize({
          animation: {
            duration: 500,
            easing: 'linear'
          }
        })
      })
    },
    // 搜索量
    chartInitNum() {
      const chartDom = document.getElementById('searchNumChart')
      const chart = this.$echarts.init(chartDom)
      chart.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          show: false
        },
        grid: {
          top: '2%',
          left: 0,
          bottom: 0,
          right: 0
        },
        series: [{
          type: 'line',
          areaStyle: {
            color: 'rgba(95,187,255,.5)'
          },
          lineStyle: {
            color: 'rgb(95,187,255)'
          },
          itemStyle: {
            opacity: false
          },
          // 平滑展示
          smooth: true,
          data: [100, 200, 300, 400, 100, 300, 220]
        }]
      })
      window.addEventListener('resize', () => {
        chart.resize({
          animation: {
            duration: 500,
            easing: 'linear'
          }
        })
      })
    },
    // 饼图
    chartInitCategory() {
      const chartDom = document.getElementById('categoryChart')
      const chart = this.$echarts.init(chartDom)
      const mockData = [
        {
          legendName: '重装机兵',
          value: 67,
          percent: '15.40%',
          itemStyle: {
            color: '#ededaa'
          },
          name: '重装机兵 | 15.40%'
        },
        {
          legendName: '上古卷轴',
          value: 92,
          percent: '22.35%',
          itemStyle: {
            color: '#8d7fec'
          },
          name: '上古卷轴 | 22.35%'
        },
        {
          legendName: '巫师3',
          value: 56,
          percent: '20.40%',
          itemStyle: {
            color: '#5085f2'
          },
          name: '巫师3 | 20.40%'
        },
        {
          legendName: '鬼泣5',
          value: 67,
          percent: '15.40%',
          itemStyle: {
            color: '#e7e702'
          },
          name: '鬼泣5 | 15.40%'
        }
      ]
      chart.setOption({
        title: [
          {
            text: '品类分布',
            left: '2%',
            top: '2%',
            textStyle: {
              fontSize: this.$nowSize(14),
              color: '#666'
            }
          },
          {
            text: '累计订单量',
            subtext: 320,
            x: '34.5%',
            y: '42.5%',
            textAlign: 'center',
            textStyle: {
              fontSize: this.$nowSize(14),
              color: '#999'
            },
            subtextStyle: {
              fontSize: this.$nowSize(28),
              color: '#333'
            }
          }
        ],
        legend: {
          // 可滑动的 设置小的height会显示切换按钮
          type: 'scroll',
          // 竖向排列
          orient: 'vertical',
          height: 250,
          left: '70%',
          top: 'middle',
          itemWidth: 40,
          itemHeight: 20,
          textStyle: {
            fontSize: this.$nowSize(14),
            color: '#8c8c8c'
          }
        },
        tooltip: {
          // 触发条件
          trigger: 'item',
          formatter: (params) => {
            // console.log(params)
            return `${params.seriesName}<br/>
                    ${params.marker}${params.data.legendName}<br/>
                    数量：${params.data.value}<br/>
                    占比：${params.data.percent}`
          }
        },
        series: [
          {
            // name 可以用于区分图表
            name: '品类分布',
            type: 'pie',
            label: {
              show: true,
              // inner内部显示 outside拉出一个视觉引导线
              position: 'outside',
              fontSize: this.$nowSize(14),
              // 自定义显示
              formatter: (params) => {
                // console.log(params)
                return `${params.data.legendName} | ${params.data.percent}`
              }
            },
            itemStyle: {
              // 通过边框让图有距离
              borderWidth: 10,
              borderColor: '#fff'
            },
            // 决定圆心位置
            center: ['35%', '50%'],
            // 半径 第一个为内半径 第二个为外半径 从圆心到线的距离
            radius: ['45%', '60%'],
            labelLine: {
              // length控制距离图的
              length: this.$nowSize(10),
              // length2控制距离字的
              length2: this.$nowSize(5),
              // 线段平滑
              smooth: true
            },
            // 控制数据顺时针排列还是逆时针排列 false为逆时针 true为顺时针
            clockwise: false,
            data: mockData
          }
        ]
      })
      window.addEventListener('resize', () => {
        chart.resize({
          animation: {
            duration: 500,
            easing: 'linear'
          }
        })
      })
    },
    onPageChange(currentPage) {
      console.log(currentPage)
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-view {
  display: flex;
  margin-top: 20px;

  .view {
    flex: 1;

    &:first-child {
      padding: 0 10px 0 0;
    }

    &:last-child {
      padding: 0 0 0 10px;
    }

    .title-wrapper {
      display: flex;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      font-weight: 600;
      padding: 0 0 0 20px;

      .radio-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 20px;
      }
    }

    .chart-wrapper {
      display: flex;
      flex-direction: column;
      height: 452px;

      .chart-inner {
        display: flex;
        padding: 0 10px;
        margin-top: 20px;

        .chart {
          flex: 1;
          padding: 0 10px;

          .chart-title {
            color: #999999;
            font-size: 14px;
          }

          .chart-data {
            font-size: 22px;
            color: #333;
            font-weight: 600;
            letter-spacing: 2px;
          }

          #searchUserChart, #searchNumChart {
            width: 100%;
            height: 50px;
          }
        }
      }

      .table-wrapper {
        flex: 1;
        margin-top: 20px;
        padding: 0 20px 20px 20px;

        .el-pagination {
          display: flex;
          justify-content: flex-end;
          margin-top: 15px;
        }
      }

      #categoryChart {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
